<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue/vue.js"></script>
</head>

<body>
    <!-- 视图层 -->
    <!-- Mustache[马斯他是] 语法 也就是双大括号 -->
    <div id="app">
        {{message}}
    </div>
    <!-- js：（命令式编程） //1.获取dom //2.message = “helloworld” //3.message b变量方法div中显示 -->
    <!-- vue：（声明式编程） // message 是什么值 在哪里显示 我们vue只需要定义message变量的内容以及在哪里显示就可以执行 -->
    <!-- //方便简洁数据和页面完全分离 -->
    <script>
        //初始化vue
        var vm = new Vue({
            el: "#app", //选中id 为app 的dom元素 //el为element的简写
            data: {
                //data 用来定义数据
                message: "hello,world" //对象形式
                    //data  两种存放形式 1.对象形式 2. 函数形式


            },
            methods: {
                //[麦赛（哎）子]
                //vue 放定义方法的地方
                btn() {
                    console.log("我可以存放方法");
                }
            }
        })
    </script>
</body>

</html>